<template>
  <div>
    <div style="box-shadow: 0 0 10px rgba(0,0,0,.1);padding: 10px 20px;border-radius: 5px;margin-bottom: 10px">
      元气每一天
      加油{{user.name}}！！！
    </div>
    <div style="display: flex">
      <el-card style="width: 30%;">
        <div slot="header" class="clearfix">
          <span>旺旺威化饼的2025年</span>
        </div>
        <div style="margin-top: 20px">
          <el-row>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </el-row>
        </div>
      </el-card>
      <el-card style="width: 70%">
        <div slot="header" class="clearfix">
          <span>渲染用户的数据</span>
        </div>
        <div>
          <el-table :data ="users">
            <el-table-column type="selection" width="55" />
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="用户名" prop="username"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="地址" prop="address"></el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Home",
  data(){
    return{
      users:[],
      user:JSON.parse(localStorage.getItem('honey-user')||'{}'),
    }
  },
  mounted() {       //页面加载完成之后触发
    request.get('http://localhost:9090/user/selectAll').then(res=>{
      this.users=res.data     //res.data就是后台返回用户的数组
    })
  },
  methods:{
    logout(){
      localStorage.removeItem('honey-user')   //清除当前的token和用户数据
      this.$router.push('/login')
    },
    handleFull(){
      document.documentElement.requestFullscreen()
    },
    handleCollapse(){
      this.isCollapse=!this.isCollapse
      this.asideWidth=this.isCollapse ? '64px':'200px'
      this.collapseIcon=this.isCollapse ? 'el-icon-s-unfold':'el-icon-s-fold'
    }
  }
}
</script>

<style scoped>

</style>